import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
import { useHistory } from "react-router";
import axios from "axios";
// import cookie from "react-cookies";
interface UserInfoState {
  playlist: any;
  privileges: any;
  bookedCount: any;
  commentCount: any;
  playCount: any;
  shareCount: any;
  songList: any; //歌单
  privilegesSongs: any; //特权歌单
  playlistComments: any;
  comments: any;
  hotComments: any;
  commentsCount: any;
  mvUrl: any;
  songUrl: any;
}

const initialState: UserInfoState = {
  playlist: "",
  privileges: "",
  bookedCount: "",
  commentCount: "",
  playCount: "",
  shareCount: "",
  songList: "",
  privilegesSongs: "",
  playlistComments: "",
  comments: "",
  hotComments: "",
  commentsCount: "",
  mvUrl: "",
  songUrl: "",
};
// export const getSongUrl = createAsyncThunk(
//   "user/songurl",
//   async (
//     paramaters: {
//       id: any;
//     },
//     thunkAPI
//   ) => {
//     const { data } = await axios.get(
//       `http://localhost:3000/song/url?id=${paramaters.id}`
//     );
//     return data;
//   }
// );
export const getMvUrl = createAsyncThunk(
  "user/mvurl",
  async (
    paramaters: {
      id: any;
    },
    thunkAPI
  ) => {
    const { data } = await axios.get(
      `http://localhost:3000/mv/url?id=${paramaters.id}`
    );
    return data;
  }
);
export const getListComments = createAsyncThunk(
  "user/comments",
  async (
    paramaters: {
      id: any;
    },
    thunkAPI
  ) => {
    const { data } = await axios.get(
      `http://localhost:3000/comment/playlist?id=${paramaters.id}`
    );
    return data;
  }
);
export const getListDetail = createAsyncThunk(
  "user/detail",
  async (
    paramaters: {
      id: number;
    },
    thunkAPI
  ) => {
    const { data } = await axios.get(
      `http://localhost:3000/playlist/detail?id=${paramaters.id}`
    );
    return data;
  }
);
export const getsongList = createAsyncThunk(
  "user/songs",
  async (
    paramaters: {
      ids: any;
    },
    thunkAPI
  ) => {
    const { data } = await axios.get(
      `http://localhost:3000/song/detail?ids=${paramaters.ids}`
    );
    return data;
  }
);
export const getlistDynamic = createAsyncThunk(
  "user/playlist",
  async (
    paramaters: {
      id: number;
    },
    thunkAPI
  ) => {
    const { data } = await axios.post(
      `http://localhost:3000/playlist/detail/dynamic?id=${paramaters.id}`
    );
    return data;
  }
);
export const listDetailSlice = createSlice({
  name: "listDetail",
  initialState,
  reducers: {},
  extraReducers: {
    [getListDetail.fulfilled.type]: (s, a) => {
      s.playlist = a.payload.playlist;
      s.privileges = a.payload.privileges;
    },
    [getlistDynamic.fulfilled.type]: (s, a) => {
      s.bookedCount = a.payload.bookedCount;
      s.commentCount = a.payload.commentCount;
      s.playCount = a.payload.playCount;
      s.shareCount = a.payload.shareCount;
    },
    [getsongList.fulfilled.type]: (s, a) => {
      s.privilegesSongs = a.payload.privileges;
      s.songList = a.payload.songs;
    },
    [getListComments.fulfilled.type]: (s, a) => {
      s.playlistComments = a.payload.comments;
      s.hotComments = a.payload.hotComments;
      s.commentsCount = a.payload.total;
    },
    [getMvUrl.fulfilled.type]: (s, a) => {
      s.mvUrl = a.payload.data["url"];
    },
    // [getSongUrl.fulfilled.type]: (s, a) => {
    //   s.songUrl = a.payload.data[0]["url"];
    // },
  },
});
